<template>
  <div>
    <Card
      :title="title"
      :isShowTitle="false"
      :class="[isInit ? 'init-mode' : '']"
    >
      <a-form-model
        ref="ruleForm"
        :rules="rules"
        :model="form"
        hideRequiredMark
        labelAlign="left"
        :colon="false"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 13 }"
      >
        <a-form-model-item
          v-show="!isInit"
          prop="oldPassword"
          :label="$t('account.oldPwd')"
        >
          <a-tooltip trigger="hover">
            <template slot="title">{{ $t('common.mustEnter') }}</template>
            <a-input-password
              autocomplete="new-password"
              v-model="form.oldPassword"
            />
          </a-tooltip>
        </a-form-model-item>

        <a-form-model-item
          prop="newPassword"
          :label="$t('account.newPassword')"
        >
          <a-input-password
            v-model="form.newPassword"
            autocomplete="new-password"
          />
        </a-form-model-item>

        <a-form-model-item
          prop="newPassword2"
          :label="$t('account.confirmPwd')"
        >
          <a-input-password
            v-model="form.newPassword2"
            autocomplete="new-password"
          />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="btnWrapperCol" class="btn-wrapper">
          <a-button type="primary" @click="onSubmit" block :loading="isLoading">
            {{ $t('common.save') }}
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </Card>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import Card from '../../components/Card.vue';
import { mapState } from 'vuex';
export default {
  name: 'passwordIntl',
  components: {
    Card,
  },
  props: {
    isInit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: this.$t('account.editPwd'),
      isLoading: false,
      form: {
        oldPassword: '',
        newPassword: '',
        newPassword2: '',
      },
      rules: {
        oldPassword: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
        newPassword: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
        newPassword2: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
      },
    };
  },
  computed: {
    ...mapState('AuthCommon', ['loginPwd']),
    btnWrapperCol() {
      if (this.isInit) {
        return {};
      } else {
        return { span: 13, offset: 7 };
      }
    },
  },
  created() {},
  mounted() {
    if (this.isInit) {
      this.form.oldPassword = this.loginPwd;
    }
  },
  methods: {
    async onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const params = {
            oldPassword: this.form.oldPassword,
            newPassword: this.form.newPassword,
            newPassword2: this.form.newPassword2,
          };
          var data = {
            api: maccApi.ACCOUNT_INFO,
            method: 'PUT',
            params: params,
          };
          this.isLoading = true;
          let res = await requestHttp(data);
          this.isLoading = false;
          if (res && res.code == 0) {
            this.$message.success(this.$t('common.saveSuceess'));
            this.$emit('savePwdSuccess');
            this.form = {
              oldPassword: '',
              newPassword: '',
              newPassword2: '',
            };
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.init-mode {
  margin: 0;
  /deep/.ant-card-bordered {
    border: none;
  }
  /deep/.ant-card-body {
    padding: 0;
  }
  /deep/.title {
    display: none;
  }
  /deep/.ant-form-item-label {
    display: none;
    height: 32px;
  }
  /deep/.ant-form-item-control-wrapper {
    width: 100%;
  }
  /deep/.ant-form-item-control {
    line-height: 32px;
  }
  .btn-wrapper {
    text-align: right;
    .ant-btn {
      width: auto;
    }
  }
  /deep/.ant-form-item {
    margin-bottom: 16px;
  }
}
</style>
